import React, {PureComponent} from "react";
import {
  Card,
  /* Table, Tabs, */
  Icon,
  Button,
  Spin,
  Modal,
} from "antd";
import {connect} from "dva";
import {withRouter} from "dva/router";
import {openNotificationWithIcon, isPhone, getPhoneUrlForHandle} from "utils/comm";
import {getFormTitleKeyList} from "utils/formilyAppHelperUtil";
import moment from "moment";
import router from "umi/router";
import ProcessInfo from "./ProcessInfo";
// import ExpandedRowContent from './ExpandedRowContent';
// import DealForm from '../processDealForm';
import FlowChartDetail from "../flowchartdetail";
// import FlowChartDetail from "../flowChartDetailNew";
// import { detailFormat } from '../../pages/flowmanage/formbuilder/nomalFn';
import CustomForm from "../customForm/CustomForm";
import RollbackForm from "../rollbackForm";
import ReturnBackForm from "./ReturnBackForm";
import SignForm from "./SignForm";
import AddSignForm from "./AddSignForm";
import TransferForm from "./TransferForm";
import DelayForm from "./DelayForm";
import RejectForm from "./RejectForm";
// import { formComment, formApproval } from './nomalData';
import RecordForm from "./RecordForm";
// import ProcessRecord from "./ProcessRecord";
import ProcessRecord from "./TemplateProcessRecord";
import styles from "./index.less";

// const { TabPane } = Tabs;

const isTrue = true;

@withRouter
@connect(({FlowHandle, loading, notice_msg: noticeModel}) => ({
  flowHandleStore: FlowHandle,
  loading,
  noticeThemeTypeList: noticeModel.noticeThemeTypeList,
}))
class FlowDataDetail extends PureComponent {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
    this.isLogLoaded = false; // 用于tab切换请求控制
    this.taskId = "";

    this.basePagination = {
      size: "small",
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ["5", "10", "15", "20"],
      total: 0,
    };

    this.state = {
      // visible: false,
      formVisible: false,
      formDraftData: undefined,
      // 第一个非开始及结束类型的流程节点，状态为TODO,通知业务系统填充数据
      // noticeBusinessSystem: false,
      rollbackVisible: false,
      returnBackVisible: false,
      signVisible: false,
      addSignVisible: false,
      transferVisible: false,
      delayVisible: false,
      pictureVisible: false,
      rejectVisible: false,
      rollbackInfo: {},
      // expandedRowKeys: [],
      // taskformFields: [],
      // releaseNotice: "",
      // formValues: {},
    };
  }

  /*
  columnsr = [
    { title: '任务名称', dataIndex: 'taskName', key: 'taskName' },
    {
      title: '任务类型',
      dataIndex: 'taskType',
      key: 'taskType',
      render: (text, record) => {
        if (record.taskType === 'multiUserTask') { // 用户类型（普通用户任务：userTask，会签任务：multiUserTask）
          return <span>会签任务</span>;
        } else if (record.taskType === 'userTask') {
          return <span>用户任务</span>;
        } else {
          return <span>text</span>
        }
      },
    },
    { title: '到达时间', dataIndex: 'createTime', key: 'createTime' },
    { title: '处理人', dataIndex: 'assignee', key: 'assignee' },
    {
      title: '操作',
      width: '100px',
      render: (text, record) => {
        if (record.taskType === 'multiUserTask') { // 用户类型（普通用户任务：userTask，会签任务：multiUserTask）
          return (
            <a className={styles.hq_ele} onClick={(e) => { e.preventDefault(); this.handleExpandable(record); }}>
              会签信息
              {// <Zcon type={this.status?'pack-up':'pack-down'} /> //}
              <Icon className={styles.icon_anticon} type={this.expandeId === record.taskId ? 'up' : 'down'} />
            </a>
          );
        } else {
          return <span>一</span>
        }
      },
    },
  ];

  columns = [
    { title: '处理时间', dataIndex: 'endTime', key: 'endTime' },
    { title: '处理环节', dataIndex: 'taskName', key: 'taskName' },
    { title: '处理人', dataIndex: 'assignee', key: 'assignee' },
    {
      title: '动作',
      dataIndex: 'type',
      key: 'type',
      render: (text) => {
        return <span>{text === 'rollback' ? '退回' : '正常处理'}</span>
      },
    },
    {
      title: '操作',
      dataIndex: 'opration',
      render: (text, record) => {
        return (
          <a onClick={(e) => { e.preventDefault(); this.handleDealFormVisible(true, record); }}>处理详情</a>
        );
      },
    }];
  */

  componentDidMount() {
    const {
      location: {
        query: {processInstanceId = "", actype = ""},
      },
    } = this.props;
    this.actype = actype;
    if (!processInstanceId) return;
    this.processInstanceId = processInstanceId;
    this.getDetailData();
    this.getNoticeThemeList();
  }

  componentDidUpdate(preProps) {
    const {
      location: {
        query: {processInstanceId = ""},
      },
    } = this.props;
    const {
      location: {
        query: {processInstanceId: preProcessInstanceId},
      },
    } = preProps;
    if (processInstanceId !== preProcessInstanceId) {
      this.getDetailData();
    }
  }

  componentWillUnmount() {
    const {dispatch} = this.props;
    dispatch({type: "FlowHandle/clearData"});
  }

  getDetailData = () => {
    const { dispatch } = this.props;
    dispatch({
      type: "FlowHandle/getProcessDetail",
      payload: {processInstanceId: this.processInstanceId},
    });
    dispatch({
      type: "FlowHandle/getStartFormDetail",
      payload: {processInstanceId: this.processInstanceId},
    });
    this.getFlowRecords();
    // this.getCurrentTasks();
  };

  getNoticeThemeList = () => {
    const {dispatch} = this.props;
    dispatch({type: 'notice_msg/getNoticeThemeType'});
  }

  // 获取流程流转记录
  getFlowRecords = () => {
    const {dispatch} = this.props;
    const {processInstanceId} = this;
    if (!processInstanceId) return;
    dispatch({
      type: "FlowHandle/getFlowRecords",
      payload: {processInstanceId},
    });
  };

  /* // 获取当前任务列表
  getCurrentTasks = () => {
    const { dispatch } = this.props;
    if (!this.processInstanceId) return;
    const { tasksPage: { pageSize, current } } = this.state;
    dispatch({ type: 'FlowHandle/getCurrentTasks', payload: { processInstanceId: this.processInstanceId, pageSize, pageNum: current } });
  }

  // 获取处理日志
  getProcessLogs = () => {
    const { dispatch } = this.props;
    if (!this.processInstanceId) return;
    const { logsPage: { pageSize, current } } = this.state;
    dispatch({ type: 'FlowHandle/handleLogs', payload: { processInstanceId: this.processInstanceId, pageSize, pageNum: current } });
  }

  handleDealFormVisible = (visible, record = '') => {
    const { handleDetail = {} } = record || {};
    const { formInfo, rollbackInfo, releaseNotice, approval, comment } = handleDetail || {};
    this.title = '处理任务';
    this.record = record;
    if (formInfo) {
      const { fields = [], name } = formInfo || {};
      const newFileds = detailFormat(fields || []);
      const formValues = {};
      fields.forEach(ele => {
        const { code, value } = ele;
        if (code) formValues[code] = value;
      });
      this.title = name;
      this.setState({ taskformFields: newFileds, formValues, releaseNotice });
      this.customFormVisible(true);
      // return;
    } else if (rollbackInfo) {
      this.title = '退回';
      this.setState({ rollbackInfo, rollbackVisible: true });
      // return;
    } else {
      const defaultFields = [
        { ...formComment, value: comment },
        { ...formApproval, value: approval },
      ];
      const { noticeDescription, receivers } = releaseNotice || {};
      this.title = '审核';
      this.setState({
        taskformFields: defaultFields,
        formValues: { approval, comment, own_noticeDescription: noticeDescription, own_receivers: receivers },
        releaseNotice, formVisible: true,
      });
    }
  }

  handleTableChange = (pagination, type = 'tasksPage') => {
    const {
      tasksPage: { pageSize: tpageSize },
      logsPage: { pageSize: lpageSize },
    } = this.state;
    if (type === 'tasksPage') {
      const newCurrent = tpageSize === pagination.pageSize ? pagination.current : 1;
      this.setState({ tasksPage: { pageSize: pagination.pageSize, current: newCurrent } }, () => {
        this.getCurrentTasks();
      });
    } else if (type === 'logsPage') {
      const newCurrent = lpageSize === pagination.pageSize ? pagination.current : 1;
      this.setState({ logsPage: { pageSize: pagination.pageSize, current: newCurrent } }, () => {
        this.getProcessLogs();
      });
    }
  } */

  handleExit = () => {
    const {handleExit} = this.props;
    if (handleExit) handleExit();
  };

  /* handleExpandable = (record) => {
    let expandedRowKeys = [record.taskId];
    if (this.expandeId === record.taskId) {
      expandedRowKeys = [];
      this.expandeId = '';
    } else {
      this.expandeId = record.taskId;
    }
    this.setState({ expandedRowKeys });
  }

  handleTabChange = (activeKey) => {
    if (activeKey === 'logs') {
      if (this.isLogLoaded) return;
      this.isLogLoaded = true;
      this.getProcessLogs();
    }
  } */

  customFormVisible = (visible, record = "") => {
    const {dispatch} = this.props;
    this.record = record;
    if (visible === true) {
      this.handleTaskForm(record, visible);
    } else {
      dispatch({type: "FlowExecution/get/getForm", payload: []});
      // this.setState({ formVisible: visible, noticeBusinessSystem: !!record.noticeBusinessSystem });
      this.setState({formVisible: visible});
    }
  };

  handleTaskForm = (record, visible) => {
    const {taskId} = record || {};
    this.taskId = taskId;
    const {dispatch, showSaveDraft} = this.props;
    dispatch({
      type: "FlowHandle/getTaskform",
      payload: {taskId},
    }).then(({errCode, errMsg, datas}) => {
      if (errCode !== 0) {
        this.openNotificationWithIcon(
          "error",
          "",
          errMsg || "获取处理表单信息失败",
        );
      } else if (!datas || !datas.fields || JSON.stringify(datas.fields) === "{}") {
        Modal.confirm({
          title: "当前暂无表单，可点击确认直接处理",
          okText: "确认",
          cancelText: "取消",
          onOk: () => this.handleFormSave({}),
          onCancel: this.handleCancel,
        });
      } else {
        const {fieldData} = datas;
        // this.setState({ formVisible: visible, formDraftData: showSaveDraft ? fieldData : undefined, noticeBusinessSystem: !!record.noticeBusinessSystem  });
        this.setState({formVisible: visible, formDraftData: showSaveDraft ? fieldData : undefined});
      }
    });
  };

  handleFormSave = (values, isDraft = false) => {
    const {afterSave, flowHandleStore} = this.props;
    const {taskformFields = {}} = flowHandleStore;
    const payload = {
      variables: values,
      taskId: this.taskId,
    };
    let type = 'FlowHandle/handleTask';
    let hint = '任务处理';
    if (isDraft) {
      type = 'FlowHandle/handleDraft';
      hint = '暂存';
    }
    const {dispatch} = this.props;
    dispatch({
      type,
      payload,
    }).then(({errCode, errMsg}) => {
      if (errCode !== 0) {
        this.openNotificationWithIcon("error", "", errMsg || `${hint}失败`);
      } else {
        this.customFormVisible(false);
        this.openNotificationWithIcon("success", "", `${hint}成功`);
        if (afterSave) {
          afterSave(isDraft, {
            ...payload,
            labels: getFormTitleKeyList(taskformFields),
            schema: taskformFields,
          });
        }
        this.getDetailData();
      }
    });
  };

  // 退回弹窗
  handleRollbackVisible = (visible) => {
    this.setState({rollbackVisible: visible});
  };

  // 撤回弹窗
  handleReturnBackVisible = (visible) => {
    this.setState({returnBackVisible: visible});
  };

  // 催办接口与逻辑
  handlePushDeal = () => {
    const {dispatch} = this.props;

    dispatch({
      type: "FlowHandle/remind",
      payload: {processInstanceId: this.processInstanceId},
    }).then(({errCode, errMsg}) => {
      if (errCode === 0) {
        this.openNotificationWithIcon("success", "", "催办成功");
        this.getDetailData();
      } else {
        this.openNotificationWithIcon("error", "", errMsg || "操作失败");
      }
    });
  };

  // 驳回 弹窗

  handleReject = () => {
    Modal.confirm({
      title: '提示',
      content: '确认要驳回吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
      },
    });
  }

  // 签收 加签 转办 延期 弹窗
  handleTaskVisible = (lable, visible, taskId, applyUserId) => {
    const onCheckOk = (timeout) => {
      if (isPhone()) {
        const url = getPhoneUrlForHandle(lable, taskId, applyUserId, timeout);
        if (url) {
          router.push(url);
        }
      } else {
        this.setState({[lable]: visible, timeout});
      }
      this.taskId = taskId;
    }
    if (lable === "delayVisible" && visible) {
      const {dispatch} = this.props;
      dispatch({
        type: "FlowHandle/getTaskTimeout",
        payload: {
          taskId,
        },
      }).then(({errCode, errMsg, datas}) => {
        if (errCode === 0) {
          if (moment(datas.task_timeout).isBefore(moment())) {
            this.openNotificationWithIcon(
              "error",
              "",
              `当前时间已超过节点超时时间，不可发起延期`,
            );
            return;
          }
          onCheckOk(datas);
        } else {
          this.openNotificationWithIcon("error", "", errMsg);
        }
      });
    } else {
      onCheckOk();
    }
  };

  // 展开流程图详情弹窗
  handlePictureVisible = (visible) => {
    this.setState({pictureVisible: visible});
  };

  handleCancel = () => {
    this.customFormVisible(false);
  };

  loadMessageTheme = (type, noticeThemeCode) => {
    const {dispatch} = this.props;
    return dispatch({
      type: 'notice_msg/getNoticeTheme',
      payload: {
        type,
        noticeThemCode: noticeThemeCode,
      },
    });
  }

  render() {
    const {
      flowHandleStore,
      loading,
      hiddenBtn = false,
      dispatch,
      noticeThemeTypeList,
      showSaveDraft,
      location,
    } = this.props;
    const {
      //  expandedRowKeys, logsPage, tasksPage,
      formVisible,
      // formValues,
      rollbackVisible,
      rollbackInfo,
      // releaseNotice,
      pictureVisible,
      returnBackVisible,
      signVisible,
      addSignVisible,
      transferVisible,
      rejectVisible,
      delayVisible,
      timeout,
      // noticeBusinessSystem,
      formDraftData,
    } = this.state;

    const {
      processDetailData = {},
      flowRecords = [],
      taskformFields = {},
      flowformLog = {},
      fieldData = {},
      // logsTotalCount, tasksTotalCount, // processLogs = [], // processTasks = [],
    } = flowHandleStore;
    const u = sessionStorage.getItem("USER_CODE") ?? '';
    let result = {};
    flowRecords.map(item => {
      if (item.children?.length > 0) {
        item.children.map(v => {
          if (
            v.operatorCode === u &&
            v.status === "NORMAL" &&
            v.taskStatus === "TODO"
          )
            result = v;
        });
      } else if (
        item.operatorCode === u &&
        item.status === "NORMAL" &&
        item.taskStatus === "TODO"
      ) {
        result = item;
      } else if (item.nodeAuthShow === true && item.nodeAuth.signIn === true) {
        result = item;
      }
    });

    let array = [];
    if (flowRecords && flowRecords.length > 1){
      const map = new Map();
      flowRecords.filter(flowRecord => flowRecord.activityId).forEach(flowRecord => {
        if (map.get(flowRecord.activityId)){
          array = array.slice(0, map.get(flowRecord.activityId)-1);
        }else {
          map.set(flowRecord.activityId, array.length+1);
        }
        array.push(flowRecord);
      });
    }

    const {process = {}, model = {}} = processDetailData;
    let newModel = model;

    if (newModel.nodes?.length > 0 && array.length > 0){
      const map = new Map();
      array.filter(flowRecord => flowRecord.taskStatus === "DONE").forEach(flowRecord => {
        map.set(flowRecord.activityId, "y");
      })
      newModel.nodes = newModel.nodes.map(node =>{
        const newVar = map.get(node.model.properties.overrideid);
        if (newVar){
          node.status = newVar;
        }
        return node;
      })
    }
    const {applyUserId} = process;
    const dataLoading = loading.effects["FlowHandle/getProcessDetail"] || false;
    const confirmLoading = loading.effects["FlowHandle/recall"] || false;
    const rejectConfirmLoading = loading.effects["FlowHandle/reject"] || false;
    const transferConfirmLoading =
      loading.effects["FlowHandle/turnTask"] || false;
    const signConfirmLoading =
      loading.effects["FlowHandle/handleTaskclaim"] || false;
    const addSignConfirmLoading =
      loading.effects["FlowHandle/addSignTask"] || false;
    const delayConfirmLoading =
      loading.effects["FlowHandle/delayTask"] || false;
    const loadingMessageTheme =
      loading.effects["notice_msg/getNoticeTheme"] || false;

    const handleTaskLoading = loading.effects["FlowHandle/handleTask"] || false;
    const handleDraftLoading = loading.effects["FlowHandle/handleDraft"] || false;
    const formLoading = loading.effects["FlowHandle/getTaskform"] || false;

    const flowformLogLoading =
      loading.effects["FlowHandle/getStartFormDetail"] || false;


    const flowRecordsLoading = loading.effects['FlowHandle/getFlowRecords'] || false;

    // const tasksLoding = loading.effects['FlowHandle/getCurrentTasks'];
    // const logsLoding = loading.effects['FlowHandle/handleLogs'];
    // const logsPagination = { ...this.basePagination, ...logsPage, total: logsTotalCount };
    // const tasksPagination = { ...this.basePagination, ...tasksPage, total: tasksTotalCount };
    // console.log(dataLoading);
    // console.log(JSON.stringify(model));

    const pictureExtra = (
      <span
        onClick={() => {
          this.handlePictureVisible(true);
        }}
        style={{cursor: "pointer"}}
      >
        <Icon type="file-image" style={{paddingRight: "8px"}} />
        查看流程图
      </span>
    );

    return (
      <div className={styles.root}>
        <Spin spinning={dataLoading || formLoading} delay={300}>
          {/* <Card title="流程图" bordered={false} className={styles.flowchart}>
            <FlowChartDetail data={model} dataLoading={dataLoading} />
          </Card> */}
          <Card title="流程单信息" bordered={false} extra={pictureExtra}>
            <ProcessInfo data={process} />
          </Card>
          {JSON.stringify(flowformLog) !== "{}" && (
            <Card title="流程发起表单" bordered={false}>
              <RecordForm
                formConfigData={flowformLog}
                dataLoading={flowformLogLoading}
                fieldData={fieldData}
              />
            </Card>
          )}
          {/* <Card
            title="流程记录"
            bordered={false}
            bodyStyle={{padding: "24px 0 24px 24px"}}
          >
            <Spin
              spinning={flowRecordsLoading}
              delay={300}
            >
              <ProcessRecord
                location={location}
                dispatch={dispatch}
                data={process}
                flowRecords={flowRecords}
                handleTaskVisible={(label, visible, taskId) => this.handleTaskVisible(label, visible, taskId, applyUserId)}
                customFormVisible={this.customFormVisible}
                actype={this.actype}
                getFlowRecords={this.getFlowRecords}
              />
            </Spin>
          </Card> */}
          <Card
            title="流程记录"
            bordered={false}
            bodyStyle={{padding: "24px 0 24px 24px"}}
          >
            <Spin
              spinning={flowRecordsLoading}
              delay={300}
            >
              <ProcessRecord
                dispatch={dispatch}
                data={process}
                flowRecords={flowRecords}
                handleTaskVisible={(label, visible, taskId) =>
                      this.handleTaskVisible(label, visible, taskId, applyUserId)
                    }
                customFormVisible={this.customFormVisible}
                actype={this.actype}
                processInstanceId={this.processInstanceId}
                result={result}
              />
            </Spin>
          </Card>
          {/*
          <div className={styles.tab_box}>
            <Tabs defaultActiveKey="task" onChange={this.handleTabChange}>
              <TabPane tab="当前任务" key="task">
                <Table
                  columns={this.columnsr}
                  expandedRowKeys={expandedRowKeys}
                  expandedRowRender={record => <ExpandedRowContent record={record} />}
                  dataSource={processTasks}
                  loading={!dataLoading && tasksLoding}
                  rowKey='taskId'
                  expandIcon={null}
                  rowClassName='row_hover_none'
                  pagination={tasksPagination}
                  onChange={(pagination) => { this.handleTableChange(pagination, 'tasksPage') }}
                />
              </TabPane>
              <TabPane tab="处理日志" key="logs">
                <Table
                  dataSource={processLogs}
                  rowKey={record => (`${record.taskId}${record.taskName}${record.assignee}${record.endTime}`)}
                  columns={this.columns}
                  loading={!dataLoading && logsLoding}
                  pagination={logsPagination}
                  onChange={(pagination) => { this.handleTableChange(pagination, 'logsPage') }}
                />
              </TabPane>
            </Tabs>
          </div>
          */}
          {!hiddenBtn && (
            <div className={[styles.btns, 'dynamic-theme'].join(' ')} style={(isPhone() ? {margin: 0} : {})}>
              <Button onClick={this.handleExit}>返回</Button>
              {this.actype === "apply" && process.canRecall && (
                <div>
                  <Button
                    onClick={() => {
                      this.handleReturnBackVisible(true);
                    }}
                  >
                    撤回
                  </Button>
                </div>
              )}
              {this.actype === "apply" && process.canRemind && (
                <Button onClick={this.handlePushDeal}>催办</Button>
              )}
            </div>
          )}
        </Spin>
        {formVisible && (
          <CustomForm
            title="处理"
            visible={formVisible}
            confirmLoading={handleTaskLoading || handleDraftLoading}
            onOk={(values) => {
              this.handleFormSave(values);
            }}
            onSaveDraft={(values) => {
              this.handleFormSave(values, true);
            }}
            onCancel={this.handleCancel}
            formConfigData={taskformFields}
            dataLoading={formLoading}
            emptyWord="当前无表单，可直接处理"
            action="处理"
            // noticeBusinessSystem={noticeBusinessSystem}
            noticeBusinessSystem
            showSaveDraft={showSaveDraft}
            initialValues={formDraftData}
          />
        )}
        {rollbackVisible && (
          <RollbackForm
            visible={rollbackVisible}
            confirmLoading={false}
            onCancel={this.handleRollbackVisible}
            disable={isTrue}
            isView={isTrue}
            data={rollbackInfo}
          />
        )}
        {returnBackVisible && (
          <ReturnBackForm
            visible={returnBackVisible}
            confirmLoading={confirmLoading}
            onCancel={this.handleReturnBackVisible}
            dispatch={dispatch}
            processInstanceId={this.processInstanceId}
            getList={this.getDetailData}
          />
        )}
        {rejectVisible && (
          <RejectForm
            visible={rejectVisible}
            confirmLoading={rejectConfirmLoading}
            onCancel={this.handleTaskVisible}
            dispatch={dispatch}
            taskId={this.taskId}
            getList={this.getDetailData}
          />
        )}
        {signVisible && (
          <SignForm
            visible={signVisible}
            confirmLoading={signConfirmLoading}
            onCancel={this.handleTaskVisible}
            dispatch={dispatch}
            taskId={this.taskId}
            getList={this.getDetailData}
            applyUserId={applyUserId}
            loadMessageTheme={this.loadMessageTheme}
            loadingMessageTheme={loadingMessageTheme}
            noticeThemeTypeList={noticeThemeTypeList}

          />
        )}
        {addSignVisible && (
          <AddSignForm
            visible={addSignVisible}
            confirmLoading={addSignConfirmLoading}
            onCancel={this.handleTaskVisible}
            dispatch={dispatch}
            taskId={this.taskId}
            getList={this.getDetailData}
            applyUserId={applyUserId}
            loadMessageTheme={this.loadMessageTheme}
            loadingMessageTheme={loadingMessageTheme}
            noticeThemeTypeList={noticeThemeTypeList}
          />
        )}
        {transferVisible && (
          <TransferForm
            visible={transferVisible}
            confirmLoading={transferConfirmLoading}
            onCancel={this.handleTaskVisible}
            dispatch={dispatch}
            taskId={this.taskId}
            getList={this.getDetailData}
            applyUserId={applyUserId}
            loadMessageTheme={this.loadMessageTheme}
            loadingMessageTheme={loadingMessageTheme}
            noticeThemeTypeList={noticeThemeTypeList}
          />
        )}
        {delayVisible && (
          <DelayForm
            visible={delayVisible}
            confirmLoading={delayConfirmLoading}
            onCancel={this.handleTaskVisible}
            dispatch={dispatch}
            taskId={this.taskId}
            getList={this.getDetailData}
            timeout={timeout}
            applyUserId={applyUserId}
            loadMessageTheme={this.loadMessageTheme}
            loadingMessageTheme={loadingMessageTheme}
            noticeThemeTypeList={noticeThemeTypeList}
          />
        )}
        {pictureVisible && (
          <Modal
            width={800}
            visible={pictureVisible}
            title="查看流程图"
            onCancel={() => {
              this.handlePictureVisible(false);
            }}
            footer={[
              <Button
                key="back"
                onClick={() => {
                  this.handlePictureVisible(false);
                }}
              >
                关闭
              </Button>,
            ]}
          >
            <FlowChartDetail data={newModel? newModel : model} dataLoading={dataLoading} flowRecords={array.length > 0 ? array : flowRecords} />
          </Modal>
        )}
      </div>
    );
  }
}

export default FlowDataDetail;
